<template>
  <div class="store-page">
    <!-- 顶部导航栏 -->
    <header class="store-header">
      <div class="header-container">
        <!-- Logo -->
        <div class="logo">
          <h1 class="logo-text">SHHM交易</h1>
        </div>
        
        <!-- 桌面搜索框 -->
        <div class="search-container desktop-search">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索商品..."
            class="search-input"
            size="large"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button :icon="Search" @click="handleSearch" />
            </template>
          </el-input>
        </div>
        
        <!-- 用户信息 -->
        <!-- 修改用户信息部分的模板 -->
<div class="user-info" 
     @mouseenter="showDropdownMenu" 
     @mouseleave="scheduleHideDropdown">
  <el-avatar :src="userAvatar" class="user-avatar">
    {{ userStore.getNickName?.charAt(0) || 'U' }}
  </el-avatar>
  <span class="username">{{ userStore.getNickName || '用户' }}</span>
  
  <!-- 下拉菜单 -->
  <div v-if="showDropdown" 
       class="user-dropdown" 
       @mouseenter="cancelHideDropdown" 
       @mouseleave="scheduleHideDropdown">
    <div class="dropdown-item" @click="goToProfile">
      <el-icon><User /></el-icon>
      <span>个人中心</span>
    </div>
    
    <!-- 我的订单 -->
    <div class="dropdown-item" @click="goToMyOrders">
      <el-icon><Grid /></el-icon>
      <span>我的订单</span>
    </div>
    
    <!-- 绑定高校 - 条件显示 -->
    <div v-if="!userStore.universityId || userStore.universityId === 0" 
         class="dropdown-item" 
         @click="showBindUniversityDialog">
      <el-icon><HomeFilled /></el-icon>
      <span>绑定高校</span>
    </div>
    
    <!-- 后台管理 - 条件显示 -->
    <div v-if="userStore.roles && userStore.roles.length > 0" 
         class="dropdown-item" 
         @click="goToManagement">
      <el-icon><Setting /></el-icon>
      <span>后台管理</span>
    </div>
    <!-- toTest -->
     <div
         class="dropdown-item" 
         @click="toTest">
      <el-icon><Setting /></el-icon>
      <span>测试</span>
    </div>
    <!-- 退出登录 -->
    <div class="dropdown-item" @click="logout">
      <el-icon><Close /></el-icon>
      <span>退出登录</span>
    </div>
  </div>
</div>
      </div>
    </header>
    
    <!-- 轮播图 -->
    <div class="carousel-container">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <div class="carousel-item" :style="{ backgroundImage: `url(${item.productImage})` }">
            <div class="carousel-content">
              <h2>{{ item.bannerTitle }}</h2>
              <p>{{ item.bannerDesc }}</p>
              <el-button type="primary" @click="goToProduct(item.productId)">
                立即查看
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 侧边栏 - 分类 -->
        <aside class="sidebar">
          <div class="category-section">
            <h3 class="section-title">商品分类</h3>
            <el-menu
              :default-active="activeCategory"
              class="category-menu"
              @select="handleCategorySelect"
            >
              <el-menu-item index="0">
                <el-icon><Grid /></el-icon>
                <span>全部商品</span>
              </el-menu-item>
              <el-menu-item v-for="category in categories" :key="category.typeId" :index="category.typeId">
                <el-icon><component :is="category.typeIcon" /></el-icon>
                <span>{{ category.typeName }}</span>
              </el-menu-item>
            </el-menu>
          </div>
          
          <!-- 公告栏 -->
          <div class="announcement-section">
            <h3 class="section-title">平台公告</h3>
            <div class="announcement-container">
              <div 
                v-for="announcement in displayedAnnouncements" 
                :key="announcement.id"
                class="announcement-item"
                @click="viewAnnouncementDetail(announcement)"
              >
                <el-tag 
                  :type="announcement.type" 
                  class="announcement-tag"
                  size="small"
                >
                  {{ announcement.tag }}
                </el-tag>
                <span class="announcement-title">{{ announcement.title }}</span>
              </div>
            </div>
            <div class="more-announcements" @click="showAllAnnouncements">
              查看更多公告 >
            </div>
          </div>
        </aside>
        
        <!-- 商品列表 -->
        <main class="product-list-container">
          <!-- 移动端搜索框 -->
          <div class="product-search mobile-search"> 
            <el-input
              v-model="searchKeyword"
              placeholder="搜索商品..."
              class="search-input"
              size="large"
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button :icon="Search" @click="handleSearch" />
              </template>
            </el-input>
          </div>
          <!-- 筛选和排序 -->
          <div class="filter-bar">
            <div class="filter-left">
              <span class="result-count">共 {{ totalProducts }} 件商品</span>
            </div>
            <div class="filter-right">
              <el-select v-model="sortBy" placeholder="排序方式" size="small">
                <el-option label="默认排序" value="0"></el-option>
                <el-option label="价格从低到高" value="2"></el-option>
                <el-option label="价格从高到低" value="1"></el-option>
                <el-option label="最新发布" value="3"></el-option>
              </el-select>
            </div>
          </div>
          
          <!-- 商品网格 -->
          <div class="product-grid">
            <div
              v-for="product in productList"
              :key="product.productId"
              class="product-card"
              @click="goToProductDetail(product.productId)"
            >
              <ProductCard 
                  :product="product" 
                  @click="goToProductDetail"
                  ></ProductCard>
            </div>
          </div>
          
          <!-- 分页 -->
           <!-- , sizes,jumper -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="totalProducts"
              layout="prev, pager, next"
              @current-change="handlePageChange"
            />
          </div>
        </main>
      </div>
    </div>
    
    <!-- 公告详情对话框 -->
    <el-dialog
      v-model="announcementDialogVisible"
      title="平台公告"
      width="600px"
      class="announcement-dialog"
    >
      <div class="announcement-dialog-content">
        <div 
          v-for="announcement in paginatedAnnouncements" 
          :key="announcement.id"
          class="announcement-dialog-item"
          @click="viewAnnouncementDetail(announcement)"
        >
          <el-tag 
            :type="announcement.type" 
            class="announcement-tag"
            size="small"
          >
            {{ announcement.tag }}
          </el-tag>
          <span class="announcement-title">{{ announcement.title }}</span>
        </div>
        
        <!-- 对话框内部分页 -->
        <div class="announcement-pagination">
          <el-pagination
            v-model:current-page="announcementCurrentPage"
            v-model:page-size="announcementPageSize"
            :total="allAnnouncements.length"
            layout="prev, pager, next"
            @current-change="handleAnnouncementPageChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 公告完整信息对话框 -->
    <el-dialog
      v-model="announcementDetailVisible"
      :title="selectedAnnouncement?.title || '公告详情'"
      width="600px"
      class="announcement-detail-dialog"
    >
      <div class="announcement-detail-content">
        <div class="detail-row">
          <span class="detail-label">公告标题：</span>
          <span class="detail-value">{{ selectedAnnouncement?.title }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">公告分类：</span>
          <span class="detail-value">{{ selectedAnnouncement?.tag }}</span>
        </div>
        <div class="detail-row detail-content">
          <span class="detail-label">公告内容：</span>
          <div class="detail-value content-value">{{ selectedAnnouncement?.content }}</div>
        </div>
        <div class="detail-row">
          <span class="detail-label">创建人：</span>
          <span class="detail-value">{{ selectedAnnouncement?.createBy }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">创建时间：</span>
          <span class="detail-value">{{ formatDate(selectedAnnouncement?.createTime) }}</span>
        </div>
      </div>
    </el-dialog>

    <!-- 绑定高校对话框 -->
    <el-dialog
      v-model="bindUniversityDialogVisible"
      title="绑定高校"
      width="500px"
      class="bind-university-dialog"
    >
      <el-form ref="bindUniversityFormRef" :model="bindUniversityForm" :rules="bindUniversityRules" label-width="100px">
        <el-form-item label="学号/工号" prop="studentId">
          <el-input v-model="bindUniversityForm.studentId" placeholder="请输入学号或工号" />
        </el-form-item>
        <el-form-item label="高校代码" prop="universityCode">
          <el-input v-model="bindUniversityForm.universityCode" placeholder="请输入高校代码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bindUniversityDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitBindUniversity">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { Search, Grid, User, HomeFilled, Setting } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import ProductCard from '@/components/common/ProductCard.vue';

// api
import { getListWithoutPage, getList, getSearchList } from '@/api/common/base';
import { getFilterProductList } from '@/api/common/home';
import request from '@/utils/request'
import {logout as logoutFromAPI} from '@/api/common/login'

// 用户存储
const userStore = useUserStore();
const router = useRouter();

// 响应式数据
const searchKeyword = ref('')
const activeCategory = ref("0")
const sortBy = ref("0")
const currentPage = ref(1)
const pageSize = ref(6)
const totalProducts = ref(0)

// 公告相关数据
const announcementDialogVisible = ref(false)
const announcementCurrentPage = ref(1)
const announcementPageSize = ref(5)
const announcementDetailVisible = ref(false)
const selectedAnnouncement = ref(null)

// 用户头像（如果没有设置则使用默认头像）
const userAvatar = ref(userStore.getAvatar || '')

// 下拉菜单显示状态和定时器
const showDropdown = ref(false)
const hideDropdownTimer = ref(null)

// 绑定高校对话框
const bindUniversityDialogVisible = ref(false)
const bindUniversityFormRef = ref(null)
const bindUniversityForm = ref({
  studentId: '', // 学号/工号
  universityCode: '' // 高校代码
})

// 表单验证规则
const bindUniversityRules = ref({
  studentId: [
    { required: true, message: '请输入学号/工号', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  universityCode: [
    { required: true, message: '请输入高校代码', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ]
})

// 轮播图数据
const carouselItems = ref([
  {
    id: 1,
    image: 'https://picsum.photos/1200/400?random=1',
    title: '精选好物推荐',
    description: '品质保证，价格实惠',
    productId: 1001
  },
  {
    id: 2,
    image: 'https://picsum.photos/1200/400?random=2',
    title: '限时特惠',
    description: '部分商品低至5折',
    productId: 1002
  },
  {
    id: 3,
    image: 'https://picsum.photos/1200/400?random=3',
    title: '新品上架',
    description: '最新商品抢先看',
    productId: 1003
  }
])

const activAnnouncement = ref([])

// 商品分类
const categories = ref([])
// const categories = ref([
//   { typeId: '1', typeName: '电子产品', typeIcon: 'Monitor' },
//   { typeId: '2', typeName: '服装配饰', typeIcon: 'ShoppingBag' },
//   { typeId: '3', typeName: '家居用品', typeIcon: 'HomeFilled' },
//   { typeId: '4', typeName: '图书文具', typeIcon: 'Reading' },
//   { typeId: '5', typeName: '运动户外', typeIcon: 'Bicycle' },
//   { typeId: '6', typeName: '美妆护肤', typeIcon: 'MagicStick' }
// ])

// 所有公告列表数据
const allAnnouncements = computed(() => {
  // 将API返回的公告数据转换为需要的格式
  return (activAnnouncement.value || []).map(item => ({
    id: item.id,
    title: item.announcementTitle,
    tag: item.announcementType,
    type: item.announcementType === '系统' ? 'danger' : 
           item.announcementType === '活动' ? 'success' : 
           item.announcementType === '通知' ? 'info' : 'primary',
    content: item.announcementContent,
    createBy: item.createBy,
    createTime: item.createTime,
    dataStatus: item.dataStatus
  }))
})

// 显示的公告（最多5条）
const displayedAnnouncements = computed(() => {
  return allAnnouncements.value.slice(0, 5)
})

// 分页后的公告
const paginatedAnnouncements = computed(() => {
  const start = (announcementCurrentPage.value - 1) * announcementPageSize.value
  const end = start + announcementPageSize.value
  return allAnnouncements.value.slice(start, end)
})

// 商品列表数据
const productList = ref([])

// 方法
const handleSearch = () => {
  // console.log('搜索关键词:', searchKeyword.value)
  router.push(`/product/search/${searchKeyword.value}`)
  // 实际项目中这里会调用API搜索商品
}

const handleCategorySelect = (categoryId) => {
  activeCategory.value = categoryId
  console.log('选择分类:', categoryId)
  // 实际项目中这里会根据分类筛选商品
}

const handlePageChange = async (page) => {
  currentPage.value = page
}

const goToProduct = (productId) => {
  router.push(`/product/${productId}`)
}

const goToProductDetail = (productId) => {
  router.push(`/product/${productId}`)
}

// 跳转到个人中心
const goToProfile = () => {
  router.push('/me')
  showDropdown.value = false
}

// 跳转到后台管理
const goToManagement = () => {
  router.push('/management')
  showDropdown.value = false
}

// 跳转到我的订单
const goToMyOrders = () => {
  router.push('/my-orders')
  showDropdown.value = false
}

// 显示下拉菜单
const showDropdownMenu = () => {
  // 清除可能存在的隐藏定时器
  if (hideDropdownTimer.value) {
    clearTimeout(hideDropdownTimer.value)
    hideDropdownTimer.value = null
  }
  showDropdown.value = true
}

// 隐藏下拉菜单
const hideDropdownMenu = () => {
  showDropdown.value = false
}

// 安排隐藏下拉菜单（带延迟）
const scheduleHideDropdown = () => {
  // 如果已有定时器，先清除
  if (hideDropdownTimer.value) {
    clearTimeout(hideDropdownTimer.value)
  }
  
  // 设置新的隐藏定时器（300ms 延迟）
  hideDropdownTimer.value = setTimeout(() => {
    hideDropdownMenu()
    hideDropdownTimer.value = null
  }, 300)
}

// 取消隐藏下拉菜单的计划
const cancelHideDropdown = () => {
  if (hideDropdownTimer.value) {
    clearTimeout(hideDropdownTimer.value)
    hideDropdownTimer.value = null
  }
}

// 显示绑定高校对话框
const showBindUniversityDialog = () => {
  bindUniversityForm.value = {
    studentId: '',
    universityCode: ''
  }
  bindUniversityDialogVisible.value = true
  hideDropdownMenu()
}

// 提交绑定高校表单
const submitBindUniversity = async () => {
  // 表单验证
  if (!bindUniversityFormRef.value) return
  
  try {
    await bindUniversityFormRef.value.validate()
    
    // 准备提交参数
    const submitParams = {
      studentId: bindUniversityForm.value.studentId,
      userId: userStore.getUserId, // 从用户存储中获取userId
      universityCode: bindUniversityForm.value.universityCode
    }
    
    console.log('绑定高校表单提交:', submitParams)
    
    // 调用API提交数据
    const res = await request({
      url: '/home/application/student',
      method: 'post',
      data: submitParams
    })
    
    // 处理API返回结果
    if (res.code === 200) {
      ElMessage.success('绑定高校申请提交成功，请等待审核')
      bindUniversityDialogVisible.value = false
      // 如果需要刷新用户信息，可以在这里调用相关方法
    } else {
      ElMessage.error(res.message || '绑定高校申请提交失败')
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 查看公告详情
const viewAnnouncementDetail = (announcement) => {
  selectedAnnouncement.value = announcement
  announcementDetailVisible.value = true
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 显示所有公告对话框
const showAllAnnouncements = () => {
  announcementDialogVisible.value = true
}

// 处理公告分页变化
const handleAnnouncementPageChange = (page) => {
  announcementCurrentPage.value = page
}

const initData = async() => { 
  let res=await getList("/home/overview");
  categories.value=res.data.AllCategories;
  carouselItems.value=res.data.productBannerList
  activAnnouncement.value=res.data.announcementList
  // console.log(activAnnouncement.value)
}

const logout = async() => { 
  let res = logoutFromAPI(userStore.getToken)
  userStore.clearUserData()
  router.push('/login')
}

const toTest = () => { 
  console.log(userStore)
}

watch([activeCategory, sortBy, currentPage], async([newCategory, newSort, newCurrentPage]) => {
  // console.log('筛选参数变化:', newCategory, newSort)
  let res=await getFilterProductList(newCurrentPage, { searchProductType: newCategory, searchProductPriceOrderDesc: newSort })
    // 根据新的数据结构映射商品数据
    productList.value = res.data.records
    
    // 更新分页信息
    currentPage.value = res.data.current;
    totalProducts.value = res.data.total;
    pageSize.value = res.data.size;
  
}, { immediate: true })

// 监听activAnnouncement变化，确保有数据时更新allAnnouncements
watch(activAnnouncement, (newValue) => {
  if (newValue && Array.isArray(newValue) && newValue.length > 0) {
    console.log('公告数据已更新:', newValue.length, '条公告')
  }
})

onMounted(() => { 
  initData()
})
</script>

<style scoped>
.store-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏样式 */
.store-header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 70px;
}

.logo-text {
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(135deg, #9faef1 0%, #8be397 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  cursor: pointer;
}

.search-container {
  flex: 1;
  margin: 0 30px;
}

.search-input {
  max-width: 500px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  transition: background-color 0.3s;
  margin-left: auto; /* 将用户信息推到右侧 */
  flex-shrink: 0; /* 防止用户信息被压缩 */
  position: relative;
}

.user-info:hover {
  background-color: #f0f2f5;
}

.user-avatar {
  margin-right: 10px;
}

.username {
  font-weight: 500;
  margin-right: 5px;
}

/* 下拉菜单样式 */
.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 150px;
  z-index: 1001;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
}

.dropdown-item:hover {
  background-color: #f5f7fa;
}

.dropdown-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.dropdown-item .el-icon {
  margin-right: 8px;
  color: #606266;
}

/* 绑定高校对话框样式 */
.bind-university-dialog .el-form {
  margin-top: 20px;
}

.bind-university-dialog .el-form-item {
  margin-bottom: 20px;
}

/* 轮播图样式 */
.carousel-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.carousel-item {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-content {
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 30px;
  border-radius: 10px;
  max-width: 600px;
}

.carousel-content h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.carousel-content p {
  font-size: 18px;
  margin-bottom: 25px;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.content-container {
  display: flex;
  gap: 20px;
}

/* 侧边栏 */
.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.category-menu {
  border: none;
}

.category-menu .el-menu-item {
  height: 45px;
  margin-bottom: 5px;
  border-radius: 6px;
}

.category-menu .el-menu-item:hover {
  background-color: #ecf5ff;
}

.category-menu .el-menu-item.is-active {
  background-color: #409eff;
  color: white;
}

/* 公告栏样式 */
.announcement-section {
  margin-top: 30px;
}

.announcement-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.announcement-item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.announcement-item:hover {
  background-color: #f0f2f5;
}

.announcement-tag {
  margin-right: 8px;
  flex-shrink: 0;
}

.announcement-title {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-announcements {
  text-align: center;
  padding: 10px;
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}

.more-announcements:hover {
  color: #66b1ff;
}

/* 公告对话框样式 */
.announcement-dialog-content {
  min-height: 300px;
}

.announcement-dialog-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}

.announcement-dialog-item:last-child {
  border-bottom: none;
}

.announcement-dialog-item:hover {
  background-color: #f0f2f5;
}

.announcement-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 公告详情对话框样式 */
.announcement-detail-content {
  padding: 10px 0;
}

.detail-row {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #606266;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  color: #303133;
}

.detail-content {
  margin-top: 20px;
  margin-bottom: 20px;
}

.content-value {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 6px;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* 商品列表区域 */
.product-list-container {
  flex: 1;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.result-count {
  color: #606266;
  font-size: 14px;
}

/* 商品网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.new-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff4d4f;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.product-info {
  padding: 15px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-description {
  font-size: 14px;
  color: #606266;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 40px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.product-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff4d4f;
}

.product-location {
  font-size: 12px;
  color: #909399;
}

.product-user {
  display: flex;
  align-items: center;
}

.user-name {
  font-size: 13px;
  color: #606266;
  margin-left: 8px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .content-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-container {
    position: relative;
  }
  
  .logo {
    margin-bottom: 15px;
    flex-shrink: 0;
  }
  
  .search-container {
    order: 3;
    margin: 15px 0 0 0;
    width: 100%;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  
  .filter-bar {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .filter-right {
    align-self: flex-end;
  }
  
  .user-info {
    margin-left: auto; /* 确保在移动端也保持右侧对齐 */
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 10px;
  }
  
  .logo-text {
    font-size: 20px;
  }
  
  .username {
    display: none;
  }
  
  .user-avatar {
    margin-right: 0;
  }
  
  .carousel-content {
    padding: 20px 15px;
  }
  
  .carousel-content h2 {
    font-size: 24px;
  }
  
  .carousel-content p {
    font-size: 16px;
  }
}
/* 搜索框显示控制 */
.desktop-search {
  display: block;
}

.mobile-search {
  display: none;
}


/* 响应式设计 */
@media (max-width: 992px) {
  .content-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
    height: auto;
    padding: 15px;
  }
  
  .logo {
    margin-bottom: 15px;
  }
  
  .search-container {
    order: 3;
    margin: 15px 0 0 0;
    width: 100%;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  
  .filter-bar {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .filter-right {
    align-self: flex-end;
  }
  
  /* 在移动端隐藏桌面搜索框，显示移动端搜索框 */
  .desktop-search {
    display: none;
  }
  
  .mobile-search {
    display: block;
    margin-bottom: 20px;
  }
  
  .user-info {
    margin-left: auto; /* 确保在移动端也保持右侧对齐 */
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 10px;
  }
  
  .logo-text {
    font-size: 20px;
  }
  
  .username {
    display: none;
  }
  
  .carousel-content {
    padding: 20px 15px;
  }
  
  .carousel-content h2 {
    font-size: 24px;
  }
  
  .carousel-content p {
    font-size: 16px;
  }
}
</style>